<script setup>
import {request} from "@/util/request.js";
import {useUserStore} from "@/store/user.js";
import {ref, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'

const userStore = useUserStore();
const config = {
    headers: {
        'token': userStore.token
    }
}
const orderList = ref([])

function getOrders() {
    request.get('/order/list', config).then(res => {
        if (res.code === 1) {
            orderList.value = res.data
        } else {
            ElMessage.error(res.msg)
        }
    })
}

function handleDelete(id) {
    ElMessageBox.confirm(
        '确认要删除订单吗？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '却笑取消',
            type: 'warning',
        }
    ).then(() => {
        request.get('/order/delete/' + id, config).then(res => {
            if (res.code === 1) {
                ElMessage.success("删除订单成功")
                getOrders()
            } else {
                ElMessage.error("删除订单失败");
            }
        })
    }).catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}

function cancel(id) {
    request.get('/order/cancel/' + id, config).then(res => {
        if (res.code === 1) {
            ElMessage.success("取消订单成功")
            getOrders()
        } else {
            ElMessage.error("取消订单失败");
        }
    })
}

onMounted(() => {
    getOrders()
})
</script>

<template>
    <!--我的订单页面-->
    <!--顶部目录-->
    <el-row style="background-color: #f5f5f5; height: 50px;line-height: 50px;text-align: center">
        <el-col :span="3">近3个月订单</el-col>
        <el-col :span="12">订单详情</el-col>
        <el-col :span="2">收货人</el-col>
        <el-col :span="2">金额</el-col>
        <el-col :span="3">全部状态</el-col>
        <el-col :span="2">操作</el-col>
    </el-row>
    <div class="order-item" v-for="item in orderList">
        <el-row style="height: 30px;background-color: #f5f5f5;line-height: 30px">
            <el-col :span="6" :offset="1">订单号:
                <el-link type="info" style="margin-left:10px; ">{{ item.orderId }}</el-link>
            </el-col>
            <el-col :span="4">{{ item.paymentTime }}</el-col>
        </el-row>
        <el-table :show-header="false" border :data="item.detailsList"
                  style="width: 100%">
            <el-table-column width="900">
                <template #default="scope">
                    <el-row>
                        <el-col :span="10"><img :src="'/api' + scope.row.product.defaultImage.imageUrl"
                                                class="product_img"></el-col>
                        <el-col :span="12">{{ scope.row.product.name }}</el-col>
                        <el-col :span="2">x{{ scope.row.quantity }}</el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column align="center">{{ item.memberName }}</el-table-column>
            <el-table-column align="center" prop="unitPrice"/>
            <el-table-column align="center">
                {{ item.status }}
            </el-table-column>
            <el-table-column align="center">
                <template #default="scope">
                    <el-button type="danger" size="small" @click="handleDelete(scope.row.orderId)">删除</el-button>
                    <br/>
                    <el-button type="success" size="small" @click="cancel(scope.row.orderId)">取消</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.order-item {
    margin: 10px 0;
}

.product_img {
    height: 80px;
}
</style>